<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="~{segmentation/_right_bottom_header::_header_common(~{::title},~{::link},~{::style})}">
    <meta charset="utf-8">
    <title>用户列表</title>
    <link>
    <style type="text/css"></style>
</head>
<body>
<div class="layuimini-container" id="userList" value="0">
    <div class="layui-row">
        <div class="layuimini-main">
            <fieldset class="layui-elem-field layuimini-search">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form" id="user-search-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">开始时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="startTime" name="startTime" autocomplete="off"
                                           placeholder="请选择开始时间"
                                           class="layui-input startTime" readonly>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">结束时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="endTime" name="endTime" autocomplete="off"
                                           placeholder="请选择结束时间"
                                           class="layui-input endTime" readonly>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">帐号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="account" autocomplete="off"
                                           placeholder="请输入帐号"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" autocomplete="off"
                                           placeholder="请输入姓名"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">手机号码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="phone" autocomplete="off"
                                           placeholder="请输入手机号码"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" autocomplete="off"
                                           placeholder="请输入手机号码"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline"
                                 sec:authorize="hasPermission(#authorization.authentication,'menus','SYSTEM_USER_LIST_MANAGEMENT')">
                                <a class="layui-btn" lay-submit="" lay-filter="user-search" title="搜搜">
                                    <i class="fa fa-search" aria-hidden="true"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>

            <div class="layui-btn-group" style="min-width: 100%;">
                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:add')"
                   class="layui-btn user-add" title="新增">
                    新增
                </a>
<!--                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:upload')"-->
<!--                   class="layui-btn user-upload"-->
<!--                   style="margin-left: 10px!important;" title="上传">-->
<!--                    上传-->
<!--                </a>-->
<!--                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:upload')"-->
<!--                   class="layui-btn user-download"-->
<!--                   style="margin-left: 10px!important;" title="下载">-->
<!--                    下载-->
<!--                </a>-->
<!--                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:batchDel')"-->
<!--                   class="layui-btn layui-btn-danger user-batch-del"-->
<!--                   style="margin-left: 10px!important;" title="批量删除">-->
<!--                    批量删除-->
<!--                </a>-->
            </div>
            <table id="userTableId" lay-filter="userTableFilter"></table>
            <script type="text/html" id="userCurrentTableBar">
                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:view')"
                   class="layui-btn layui-btn-xs user-view" value="{{d.id}}" lay-event="view" title="查看">
                    查看
                </a>
                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:edit')"
                   class="layui-btn layui-btn-xs user-edit" value="{{d.id}}" lay-event="edit" title="编辑">
                    编辑
                </a>
                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:enable')"
                   class="layui-btn layui-btn-xs {{# if(d.enableStatus == 1){ }}layui-bg-orange{{# } else { }}layui-btn-normal{{# } }} user-enable" value="{{d.id}}"
                   lay-event="enable" title="{{#  if(d.enableStatus == 1){ }}禁用{{#  } else { }}启用{{#  } }}">
                    {{#  if(d.enableStatus == 1){ }}
                    禁用
                    {{#  } else { }}
                    启用
                    {{#  } }}
                </a>
                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:password')"
                   class="layui-btn layui-btn-xs layui-btn-warm user-password" value="{{d.id}}" lay-event="password" title="修改密码">
                    修改密码
                </a>
                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:system_user_role_view')"
                   class="layui-btn layui-btn-xs layui-btn-normal user-auth-role" value="{{d.id}}" lay-event="authRole" title="授权角色">
                    授权角色
                </a>
                <a sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:del')"
                   class="layui-btn layui-btn-xs layui-btn-danger user-delete" value="{{d.id}}"
                   lay-event="delete" title="删除">
                    删除
                </a>
            </script>

            <script type="text/html" id="enableStatusCurrentTableBar">
                {{#  if(d.enableStatus == 1){ }}
                <span style="color: limegreen;">是</span>
                {{#  } else { }}
                <span style="color: red;">否</span>
                {{#  } }}
            </script>
            <script type="text/html" id="operaterStatusCurrentTableBar">
                {{#  if(d.operaterStatus == 1){ }}
                新增
                {{#  } else { }}
                修改
                {{#  } }}
            </script>
        </div>
    </div>
</div>
<div th:replace="~{segmentation/_tail::_tail_common}"></div>
<script th:inline="javascript">
    /*<![CDATA[*/
    [# sec:authorize="hasPermission(#authorization.authentication,'menus','SYSTEM_USER_LIST_MANAGEMENT')"]
    layui.use(['form', 'table', 'common'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            common = layui.common,
            startTime = {}, endTime = {},
            numView = 0, numEdit = 0, numDel = 0, numPassword = 0, numAuthRole = 0, numEnable = 0,
            tableIdFilter = "userTableFilter",
            tableId = "userTableId";

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:add')"]
        // 新增操作
        $(document).off("click", ".user-add");
        $(document).on("click", ".user-add", function () {
            var title = $(this).attr("title");
            var url = "/system/user/get/add";
            var formId = "userFormAddId";
            common.layer_show(title, url, null, null, formId, null, null, null, function () {
                if($("#userList").attr('value') == 1) {
                    $("#userList").attr('value', 0);
                    var queryData = common.getFormData($("#user-search-form"));
                    common.tableRefresh(tableId, queryData);
                }
            });
        });
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:view')"]
        numView = 1;
        function initView() {
            // 查看信息
            $(".layui-table").off("click", ".user-view");
            $(".layui-table").on("click", ".user-view", function () {
                var title = $(this).attr("title");
                var url = "/system/user/get/view?id=" + $(this).attr("value");
                var formId = "userFormViewId";
                common.layer_show(title, url, null, null, formId, null, null, null, function () {
                    // var queryData = common.getFormData($("#user-search-form"));
                    // common.tableRefresh(tableId, queryData);
                });
            });
        }
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:system_user_role_view')"]
        numAuthRole = 1;
        function initAuthRole() {
            // 授权角色信息
            $(".layui-table").off("click", ".user-auth-role");
            $(".layui-table").on("click", ".user-auth-role", function () {
                var title = $(this).attr("title");
                var url = "/system/user/role/page/list?userId=" + $(this).attr("value");
                var formId = "userFormAuthRoleId";
                common.layer_show(title, url, null, null, formId, null, null, null, function () {
                    if($("#userList").attr('value') == 1) {
                        $("#userList").attr('value', 0);
                        var queryData = common.getFormData($("#user-search-form"));
                        common.tableRefresh(tableId, queryData);
                    }
                });
            });
        }
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:edit')"]
        numEdit = 1;
        function initEdit() {
            // 编辑操作
            $(".layui-table").off("click", ".user-edit");
            $(".layui-table").on("click", ".user-edit", function () {
                var title = $(this).attr("title");
                var url = "/system/user/get/edit?id=" + $(this).attr("value");
                var formId = "userFormEditId";
                common.layer_show(title, url, null, null, formId, null, null, null, function () {
                    if($("#userList").attr('value') == 1) {
                        $("#userList").attr('value', 0);
                        var queryData = common.getFormData($("#user-search-form"));
                        common.tableRefresh(tableId, queryData);
                    }
                });
            });
        }
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:password')"]
        numPassword = 1;
        function initPassword() {
            // 修改密码操作
            $(".layui-table").off("click", ".user-password");
            $(".layui-table").on("click", ".user-password", function () {
                var title = $(this).attr("title");
                var url = "/system/user/get/password?id=" + $(this).attr("value");
                var formId = "userFormPasswordId";
                common.layer_show(title, url, null, null, formId, null, null, null, function () {
                    if($("#userList").attr('value') == 1) {
                        $("#userList").attr('value', 0);
                        var queryData = common.getFormData($("#user-search-form"));
                        common.tableRefresh(tableId, queryData);
                    }
                });
            });
        }
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:enable')"]
        numEnable = 1;
        function initEnable() {
            // 启用、禁用信息
            $(".layui-table").off("click", ".user-enable");
            $(".layui-table").on("click", ".user-enable", function () {
                var id = $(this).attr("value");
                var title = $(this).attr("title");
                if (id.length == 0) {
                    layer.msg('请选中' + title + '信息');
                    return;
                }
                layer.confirm('确认' + title + '吗？', {
                    icon: 3,
                    title: '提示',
                    shadeClose: true
                }, function (index) {
                    layer.close(index);
                    $.ajax({
                        type: 'GET',
                        url: '/system/user/enable',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == Result.SUCCESS) {
                                layer.msg('成功!', {
                                    icon: 1,
                                    shade: [0.3, '#f5f5f5'],
                                    time: 1500
                                }, function () {
                                    var queryData = common.getFormData($("#user-search-form"));
                                    common.tableRefresh(tableId, queryData);
                                });
                            } else {
                                layer.msg(data.msg, {
                                    icon: 2,
                                    time: 3000
                                });
                            }
                        }, error: function (data) {
                            console.log(data);
                        },
                    });
                });
                return;
            });
        }
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:del')"]
        numDel = 1;
        function initDel() {
            // 删除操作
            $(".layui-table").off("click", ".user-delete");
            $(".layui-table").on("click", ".user-delete", function () {
                // var ids = common.getTableRowId('userTableId', "id")
                var id = $(this).attr("value");
                if (id.length == 0) {
                    layer.msg('请选中删除信息');
                    return;
                }
                layer.confirm('确认删除吗？', {
                    icon: 3,
                    title: '提示',
                    shadeClose: true
                }, function (index) {
                    layer.close(index);
                    $.ajax({
                        type: 'DELETE',
                        url: '/system/user/del',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function (data) {
                            if (data.code == Result.SUCCESS) {
                                layer.msg('成功!', {
                                    icon: 1,
                                    shade: [0.3, '#f5f5f5'],
                                    time: 1500
                                }, function () {
                                    var queryData = common.getFormData($("#user-search-form"));
                                    common.tableRefresh(tableId, queryData);
                                });
                            } else {
                                layer.msg(data.msg, {
                                    icon: 2,
                                    time: 3000
                                });
                            }
                        }
                        /* error:function(data) {
                            console.log(data.msg);
                        }, */
                    });
                });
                return;
            });
        }
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:batchDel')"]
        // // 批量删除操作
        // $(document).off("click", ".user-batch-del");
        // $(document).on("click", ".user-batch-del", function () {
        //     var ids = common.getTableRowId(tableId, "id");
        //     if (ids.length == 0) {
        //         layer.msg('请选中删除信息');
        //         return;
        //     }
        //     layer.confirm('确认删除吗？', {
        //         icon: 3,
        //         title: '提示',
        //         shadeClose: true
        //     }, function (index) {
        //         layer.close(index);
        //         $.ajax({
        //             type: 'POST',
        //             url: '/system/user/batch/del',
        //             data: {
        //                 idList: ids
        //             },
        //             dataType: 'json',
        //             success: function (data) {
        //                 if (data.code == Result.SUCCESS) {
        //                     layer.msg('成功!', {
        //                         icon: 1,
        //                         shade: [0.3, '#f5f5f5'],
        //                         time: 1500
        //                     }, function () {
        //                         var queryData = common.getFormData($("#user-search-form"));
        //                         common.tableRefresh(tableId, queryData);
        //                     });
        //                 } else {
        //                     layer.msg(data.msg, {
        //                         icon: 2,
        //                         time: 3000
        //                     });
        //                 }
        //             }
        //             /* error:function(data) {
        //                 console.log(data.msg);
        //             }, */
        //         });
        //     });
        //     return;
        // });
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:upload')"]
        // 上传操作
        $(document).off("click", ".user-upload");
        $(document).on("click", ".user-upload", function () {
            var title = $(this).attr("title");
            var url = "/system/user/get/upload";
            var formId = "userFormUploadId";
            common.layer_show(title, url,  1000, 500, formId, function(layero, index){
                //加载完成最大化触发
                layer.full(index);
            }, null, null, function () {
                if($("#userList").attr('value') == 1) {
                    $("#userList").attr('value', 0);
                    var queryData = common.getFormData($("#user-search-form"));
                    common.tableRefresh(tableId, queryData);
                }
            });
        });
        [/]

        [# sec:authorize="hasPermission(#authorization.authentication,'button','SYSTEM_USER_LIST_MANAGEMENT:download')"]
        // 下载操作
        $(document).off("click", ".user-download");
        $(document).on("click", ".user-download", function () {
            var url = "/other/file/info/download?code=user&id=1";
            window.location.href = url;
        });
        [/]


        //表格数据完成后初始化
        function tableInit(res, curr, count) {
            if (numView == 1) {
                initView();
            }
            if (numAuthRole == 1) {
                initAuthRole();
            }
            if (numEdit == 1) {
                initEdit();
            }
            if (numPassword == 1) {
                initPassword();
            }
            if (numEnable == 1) {
                initEnable();
            }
            if (numDel == 1) {
                initDel();
            }
            // common.initCheckbokOrRadio(tableId, 1);
        }

        var userTableId = table.render({
            elem: '#' + tableId,
            id: tableId,
            url: '/system/user/find/page/list',
            height: 'full-250',
            // contentType: 'application/json',
            // method: 'post',
            // even: true,
            done: tableInit,
            cols: [
                [
                    {type: "checkbox", width: 50, field: 'id', fixed: "left"},
                    {type: "numbers", width: 50, fixed: "left", title: '序号'},
                    {field: 'account', width: 150, title: '帐号', sort: true},
                    {field: 'name', width: 100, title: '姓名', sort: true},
                    {field: 'phone', width: 120, title: '电话', sort: true},
                    {field: 'email', width: 180, title: '邮箱', sort: true},
                    {field: 'enableStatus', width: 80, title: '启用', sort: true, templet: '#enableStatusCurrentTableBar'},
                    {field: 'operaterStatus', width: 100, title: '状态', sort: true, templet: '#operaterStatusCurrentTableBar'},
                    {field: 'operaterTime', width: 160, title: '操作时间', sort: true},
                    {field: 'operaterUserName', width: 120, title: '操作人', sort: true},
                    {title: '操作', minWidth: 200, templet: '#userCurrentTableBar', fixed: "right", align: "center"}
                ]
            ],
            // initSort: {
            //      sort: "createTime", //排序字段   在接口作为参数字段  field order
            //      order: "desc"
            // },
            sort: true,
            limits: [10, 25, 50, 100],
            limit: 10,
            page: true
        });

        // 行单击事件( 双击事件为: rowDouble )
        table.on('row(' + tableIdFilter + ')', function (obj) {
            // 标注当前点击行的选中状态
            obj.setRowChecked({
                type: 'checkbox' // radio 单选模式；checkbox 复选模式
            });
        });

        table.on('sort(' + tableIdFilter + ')', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            var queryData = common.getFormData($("#user-search-form"));
            queryData.sort = obj.field;//排序字段   在接口作为参数字段  field order
            queryData.order = obj.type;//排序方式   在接口作为参数字段  field order
            //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
            common.tableRefresh(tableId, queryData);
        });

        // 监听搜索操作
        form.on('submit(user-search)', function (data) {
            //执行搜索重载
            common.tableRefresh(tableId, data.field);
            return false;//返回false防止重复提交
        });

        startTime = laydate.render({
            elem: '#startTime',
            type: 'datetime',
            // min: -7, //7天前
            max: 'nowTime',//7天后
            btns: ['clear', 'confirm'],
            theme: 'grid',
            done: function (value, date, endDate){
                common.setUpEndTime(endTime, value, date, 6);
            }
        });

        endTime = laydate.render({
            elem: '#endTime',
            type: 'datetime',
            max: 'nowTime',//7天后
            btns: ['clear', 'confirm'],
            theme: 'grid',
            ready: function(data){
                var now = new Date();
                this.dateTime.hours = now.getHours();
                this.dateTime.minutes = now.getMinutes();
                this.dateTime.seconds = now.getSeconds();
            },
            done: function (value, date, endDate){
                common.setUpStartTime(startTime, value, date, 6);
            }
        });
    });
    [/]
    /*]]>*/
</script>
</body>
</html>